---
title: "Accessibility Checker Rule Help: HAAC_Img_UsemapAlt"
---
import "../../../styles/ToolHelp.scss"
import { CodeSnippet, Tag } from "carbon-components-react";

<div className="toolHelp">
<Row>
<Column colLg={16} colMd={8} colSm={4} className="toolHead">

### Imagemap is missing text alternative(s)

<div id="locLevel"></div>

An image map must have text alternative(s)

</Column>
</Row>
<Row>
<Column colLg={11} colMd={5} colSm={4} className="toolMain">

### Why is this important?

An image map is an image divided into selectable regions defined by area elements. When the image map contains important information, providing a text alternative for the map makes the same information accessible through audio or other channels.

<div id="locSnippet"></div>

### What to do

Add an `alt` attribute to the image that uses a non-empty `usemap` attribute to provide a short description that serves the same purpose.

For example:

<CodeSnippet type="multi" light={true}>&lt;img src="blood.gif" width="145" height="126" alt="Blood Cells" usemap="#cellmap"&gt;
    
&lt;map name="cellmap"&gt;
&lt;area shape="circle" coords="90,58,3"  href="redbloodcell.htm" alt="Erythrocyte"&gt;
&lt;area shape="circle" coords="124,58,8" href="whitebloodcell.htm" alt="Monocyte"&gt;
&lt;/map&gt;</CodeSnippet>

</Column>
<Column colLg={5} colMd={3} colSm={4} className="toolLeft">

### About this requirement

[IBM 1.1.1 Non-text content](http://www.ibm.com/able/guidelines/ci162/non_text_content.html)
[WCAG  2.1 technique H24](https://www.w3.org/TR/WCAG20-TECHS/H24)

### Who does this affect?

* Blind people using screen readers
* People who turn off image-loading on their web browsers
* People using text-based browsers (e.g., Lynx) or audio interfaces

</Column>
</Row>
</div>

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)
